<template>
  <div class="project-wrapper">
    <img src="../../assets/images/project-logo.png" class="logo">
    <div class="tips">
      <h4>根据您账号的权限，可以选择所属的层级进入系统</h4>
      <p>（根据选择的等级不同进入不同的系统的等级）</p>
    </div>
    
    <div class="select-box" ref="selects">
      <el-select class="select-item" v-model="value1">
        <el-option v-for="(item,index) in projectsTree" :key="index" :label="item.name" :value="index"></el-option>
      </el-select>
      <el-select class="select-item" v-model="value2" v-if="projectsTree[value1] && projectsTree[value1].children.length != 0">
        <el-option v-for="(item,index) in projectsTree[value1].children" :key="index" :label="item.name" :value="index"></el-option>
      </el-select>
      <el-select class="select-item" v-model="value3" v-if="projectsTree[value1].children[value2] && projectsTree[value1].children[value2].children.length != 0">
        <el-option v-for="(item,index) in projectsTree[value1].children[value2].children" :key="index" :label="item.name" :value="index"></el-option>
      </el-select>
    </div>

    <el-button type="primary" class="select-item" @click="logIn" :loading="chooseLoading">进入</el-button>
  </div>
</template>

<script>
import {mapMutations} from "vuex";
export default {
  data(){
    return{
      projectsTree:[],
      value1:0,
      value2:0,
      value3:0,
      chooseLoading:false,
    }
  },
  props:{
    projects:{
      type:Array,
      default:()=>[]
    }
  },
  watch:{
    projects:{
      handler(v){
        if(v.length > 0) this.projectsTree = this.buildTree()
      },
      deep:true,
      immediate:true
    }
  },
  methods:{
    //转树形结构
    buildTree(list = [],pid = 0){
      this.projects.filter(item => {
        if (item.parentId === pid) {
          if (!item.children) {
            item.children = []
          }
          item.children = this.buildTree([], item.deptId)
          list.push(item)
        }
      })
      return list
    },
    logIn(){
      let len = this.$refs.selects.children.length
      let result = this.projectsTree
      for (let i = 1; i < len; i++) {
        result = result[this.$data['value' + i]].children
      }
      let data = result[this.$data['value' + len]]
      this.SET_PROJECTINFO({
        name:data.name,
        deptId:data.deptId,
        address:data.extraValue,
        logo:this.projectsTree[this.value1].extraValue,
        companyName:this.projectsTree[this.value1].name,
      })
      this.chooseLoading = false
      this.$emit('close')
    },
    ...mapMutations('user',['SET_PROJECTINFO'])
  }
}
</script>

<style lang="scss" scoped>
.project-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  .logo{
    width:200px;
  }
  .tips{
    text-align: center;
    margin: 20px 0;
    h4{
      margin: 0 0 5px;
      font-size: 15px;
    }
    p{
      font-size: 12px;
      margin: 0;
    }
  }
  .select-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
  }
  ::v-deep .select-item{
    width: 260px;
    height: 40px;
    margin-bottom: 16px;
  }
}
</style>